<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:body>
        <ui:composition template="#{facesContext.externalContext.requestContextPath}/tmpl/index.xhtml">
            <ui:define name="left">
                <h3 class="textshad"><img src="images/home-icon.gif" alt="Accueil du site" title="Accueil du site" />Menu principal</h3>

                <div id="menu">
                    <button rel="#ajouter" type="button"><img src="images/add_ico.gif" title="Ajouter un nouveau contact" alt="Ajouter un nouveau contact"/><span>Ajouter</span> </button>
                    <button rel="#rechercher" type="button"><img src="images/search-icone.png" title="Rechercher un contact" alt="Rechercher un contact"/> <span>Rechercher</span></button>

                    <!-- On initialise chaque Overlay -->
                    <script type="text/javascript" >
                        $(function() {
                            $("button[rel]").overlay({mask: '#000', effect: 'apple'});
                        });
                    </script>
                </div><!-- Boutons "Ajout" + "Recherche"-->
                <hr />
                <div id="trie">
                    <img src="images/tri.png" alt="Trier par..." title="Trier par..."/>
                    <h3 class="textshad">Trier par : </h3>
                    <ul>
                        <li>Type</li>
                        <li>Pays</li>
                        <li>Ville</li>
                        <li>Entreprise</li>
                    </ul>
                </div><!-- Trier par ... -->
            </ui:define>
        </ui:composition>
    </h:body>
</html>

